<template>
  <div class="toast"  v-show="isShow">
      <div>{{message}}</div>
  </div>
</template>

<script>
export default {
    name:'Toast',
    props:{
    //     message:{
    //         type:String,
    //         default:''
                

            
    //     },
    //      show:{
    //     type:Boolean,
    //     default:false
    // }

    },
    data(){
        return {
            message:'',
            isShow:false

        }
    },
    methods:{
        //默认值是2000，不传时间的时候默认是2000
        show(message='默认文字',auration=2000){
            this.isShow = true
            this.message = message

            setTimeout(() => {
                this.isShow = false
                this.message = ''
            },auration)

        }
    }
   
}
</script>

<style scoped>
.toast{
    /* 使用定位写居中效果 */
    position: fixed;
    top: 50%;
    left: 50%;
    /* 根据自己的宽高左移动自己的百分之50，高度向下移动自己的百分之50 */
    transform: translate(-50%,-50%);
    z-index: 999;


    padding: 8px 10px;
    color: #fff;
    background-color:rgba(0, 0, 0, .5);
}

</style>